<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=320, user-scalable=0"/>
  <meta name="viewport" content="minimum-scale=1, maximum-scale=1"/>
  <script src="ianime029-all.js"></script>
  <script type="text/javascript">
var anime = new iAnime();

function myclick(obj)
{
    anime.add( {
        element:obj, 
        x:(400-obj.offsetLeft), 
        cp: eval(obj.id), 
        duration:1000} );
}

function myclick2(obj)
{
    anime.addSequence([
        { element:obj, x:200, y:0, cp:[{x:0,y:0}], duration:400 },
        { element:obj, x:200, y:300, cp:[{x:400,y:0},{x:200,y:200}], duration:700 },
        { element:obj, x:0, y:100, cp:[{x:200,y:100}], duration:500 },
        { element:obj, x:0, y:100 }
    ]);
}
  </script>
</head>
<body>
  <div id='[{x:0,y:400}]' onclick="myclick(this)" 
       style="position:absolute; top: 0px">(0,400)</div>
  <div id='[{x:300,y:400}]' onclick="myclick(this)" 
       style="position:absolute; top: 20px">(300,400)</div>
  <div id='[{x:300,y:400},{x:0,y:400}]' onclick="myclick(this)" 
       style="position:absolute; top: 40px">(300,400)-(0,400)</div>
  <div id='[{x:0,y:300},{x:100,y:400},{x:200,y:400},{x:300,y:300}]' onclick="myclick(this)" 
       style="position:absolute; top: 60px">(0,300)-(100,400)-(200,400)-(300,300)</div>
  <div onclick="myclick2(this)" 
       style="position:absolute; left:10px; top:100px">Sequence</div>
</body>
</html>
